<% layout('/layouts/default.html', {title: '品牌详情管理', libs: ['validate','fileupload']}){ %>
<div class="main-content">
    <div class="box box-main">
        <div class="box-header with-border">
            <div class="box-title">
                <i class="fa icon-note"></i> ${text(brand.isNewRecord ? '新增品牌详情' : '编辑品牌详情')}
            </div>
            <div class="box-tools pull-right hide">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div>
        </div>
        <#form:form id="inputForm" model="${brand}" action="${ctx}/brand/brand/saveBrand" method="post" class="form-horizontal">
        <div class="box-body">
            <div class="form-unit">${text('基本信息')}</div>
            <#form:hidden path="brandId"/>
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="control-label col-sm-4" title="">
                            <span class="required ">*</span> ${text('名称')}：<i class="fa icon-question hide"></i></label>
                        <div class="col-sm-8">
                            <#form:input path="title" maxlength="64" placeholder="请输入品牌名称" class="form-control required"/>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="control-label col-sm-4" title="">
                            <span class="required">*</span> ${text('类型')}：<i class="fa icon-question hide"></i></label>
                        <div class="col-sm-8">
                            <#form:select path="type" dictType="h_big_type" class="form-control required" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="control-label col-sm-2 col-sm-9-1" title="">
                            <span class="required hide">*</span> ${text('备注信息')}：<i class="fa icon-question hide"></i></label>
                        <div class="col-sm-10 col-sm-9-8">
                            <#form:textarea path="remarks" rows="4" maxlength="2000" class="form-control"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-unit">${text('图片信息')}</div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="control-label col-sm-2 col-sm-9-1">
                            <span class="required">*</span> ${text('logo')}：</label>
                        <div class="col-sm-10 col-sm-9-8">
                            <div class="custom-box">
                                <div class="custom-center-title">
                                    <ul class="custom-ul" id="image"></ul>
                                    <div id="showBtn" class="custom-center">
                                        <i class="fa fa-image custom-icon"></i>
                                        <div class="custom-file">
                                            <span>点击选择图片</span>
                                            <input type="file" accept="image/*" class="cover-file" id="cover">
                                        </div>
                                        <span class="custom-tips">最多可选择 1 张图片呦~</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-footer">
            <div class="row">
                <div class="col-sm-offset-2 col-sm-10">
                    <% if (hasPermi('brand:brand:edit')){ %>
                    <button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;
                    <% } %>
                    <button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
                </div>
            </div>
        </div>
    </#form:form>
</div>
</div>
<% } %>
<script>

    let imgList = [],deleteInfo={brand:[]};
    const brand = JSON.parse('${toJson(brand)}'),baseUrl='${baseUrl}';
    if(brand.logo !== undefined && brand.logo !== ''){
        imgList = [{logo:brand.logo}];
        imgShow(0,imgList);
    }

    // 上传图片
    $('#cover').on('change',function (e) {
        let img = e.target.files;
        const fix = (new Date()).getTime();
        for(let i=0;i<img.length;i++) {
            const name = (img[i].name).split('.');
            const file = new File([img[i]], 'cover_' + (fix+i) + '.' + name[1]);
            file.imgType='new';
            imgList=imgList.concat(file);
        }
        imgShow(0,imgList);
    });
    // 显示图片列表
    function imgShow(index,attr){
        let html = '';
        let windowURL = window.URL || window.webkitURL;
        for(let i =0;i<attr.length;i++) {
            if(attr[i].imgType){
                let dataURL = windowURL.createObjectURL(attr[i]);
                html +='<li class="custom-li">' +
                    '<div class="custom-trash" onclick="removeImg('+ index +','+i+')"><i class="fa fa-trash custom-del"></i></div>' +
                    '<div><img class="custom-img" src="'+dataURL+'"></div>' +
                    '<div class="custom-load">等待上传</div>' +
                    '</li>';
                windowURL.revokeObjectURL(attr[i]);
            }else {
                let dataURL = baseUrl+attr[i].logo;
                html +='<li class="custom-li">' +
                    '<div class="custom-trash" onclick="removeImg('+ index +','+i+')"><i class="fa fa-trash custom-del"></i></div>' +
                    '<div><img class="custom-img" src="'+dataURL+'"></div>' +
                    '<div class="custom-success">已上传</div>' +
                    '</li>';
            }
        }
        if(attr.length>0){
            $('#showBtn').hide();
        }else{
            $('#showBtn').show();
        }
        $('#image').html(html);
    }
    // 移除图片
    function removeImg(index,obj){
        js.confirm('确认删除该图片吗？', function(){
            $.each(imgList,(index)=>{
                if(index==obj){
                    if(!imgList[obj].imgType){
                        const img = imgList[obj].logo.split("/");
                        deleteInfo.brand.push(img[img.length-1])
                    }
                    imgList.splice(index,1);
                }
            });
            imgShow(0,imgList);
        });
    }
    // 保存
    $("#inputForm").validate({
        submitHandler: function(form){
            let formData = $(form).serializeArray();
            saveFileData(formData);
        }
    });
    function saveFileData(formData) {
        if(imgList.length==0){
            js.showMessage('封面图片未上传！！');
            return;
        }
        let paramsImg = new FormData();
        $.each(formData, function(i, obj) {
            paramsImg.append(obj.name,obj.value);
        });
        for(let i=0;i<imgList.length;i++){
            paramsImg.append('files',imgList[i]);
        }
        paramsImg.append("delBrand", deleteInfo.brand.join(","));
        js.confirm('确认提交吗？', function(){
            $.ajax({
                url : '${ctx}/brand/brand/saveBrand',
                type : 'POST',
                data : paramsImg,
                dataType : 'JSON',
                contentType:false,
                processData:false,
                mimeType:"multipart/form-data",
                success : function(data) {
                    js.showMessage(data.message);
                    if(data.result == 'true'){
                        js.closeCurrentTabPage(function(contentWindow){
                            contentWindow.page();
                        });
                    }
                }
            });
        });
    }
</script>